<!--添加角色-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="addRoleModal">
    <template id="addRoleModal">
        <div>
            <el-dialog title="添加" width="25%" :visible.sync='show_add_role_modal' center :show-close="false" size="mini" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form ref="form" :model="formData" label-width="80px" size="mini">
                    <el-form-item label="父级名称:">
                        <el-select :remote-method="remotedSearch" @visible-change="openOrCloseSelectHandle" v-model="formData.upLevelCode" size="mini" filterable remote  placeholder="无父级名称可不选...">
                            <el-option v-for="item in roleNameCodeLis" :key="item.code" :label="item.name" :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色代码:">
                        <el-input v-model="formData.code" placeholder="由八位以下字符组成..."></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称:">
                        <el-input v-model="formData.name" placeholder="请输入一位以上汉字..."></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="cancelAddRoleDialogHandle">取 消</el-button>
                    <el-button size="mini" @click="confirmAddRoleDialogHandle" type="primary" >确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
    <script>
        const AddRoleModal = {
            props: {
                show_add_role_modal: Boolean
            },
            template: '#addRoleModal',
            data(){
                return {
                    formData: {
                        code: null,
                        name: null,
                        upLevelCode: null
                    },
                    roleNameCodeLis:[],
                }
            },
            methods:{
                //对【上级名称】搜索
                remotedSearch: function (value) {
                    axios.get(
                        '/system/role/findAll',
                        {
                            params: {
                                searchInfo: value
                            }
                        }
                    ).then(response=>{
                        const code = response.data.code;
                        console.log('response: ',response);
                        if(code!="0000"){
                            this.$message.error("查询错误!");
                            return ;
                        }
                        this.roleNameCodeLis = response.data.data;
                    }).finally(err=>{
                    });
                },
                //打开或关闭下拉框时触发
                openOrCloseSelectHandle: function (active) {
                    if(active){
                        return this.remotedSearch("");
                    }
                    console.log("上级代码：",this.formData.upLevelCode);
                },
                cancelAddRoleDialogHandle: function (){
                    this.$emit('add_role_modal_close');
                },
                confirmAddRoleDialogHandle: function () {
                    axios.post("/system/role/addRole", {data: this.formData})
                         .then(response => {
                             if(!response){
                                 this.$message.error("新增错误."+response);
                             }
                            const data = response.data;
                            console.log(data);
                            if(data.code != '0000'){
                                this.$message.error("新增错误."+data.info);
                                return ;
                            }
                            this.$message.success("新增成功.");
                    }).finally(error=>{
                        console.log(error);
                        this.$message.error(error);
                    });
                    console.log(this.formData);
                    this.cancelAddRoleDialogHandle();
                },
            },
        }
    </script>
    <style scoped>
        .el-dialog__header {
            border-bottom: 1px solid #e8eaec;
        }
        .el-dialog__footer {
            border-top: 1px solid #e8eaec;
        }
        .el-dialog--center .el-dialog__body {
            padding: 20px 30px 20px;
        }
        .el-select {
            display: flex;
        }
    </style>
</div>
</html>